<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>评论</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<jsp:include page="iconfont/iconfont.jsp" flush="true"/><!--动态包含-->
		<jsp:include page="common/common_head.jsp"></jsp:include>
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/base/comment.css'/>" />
	</head>
	<style>
	body{
		background: url(<c:url value='/resources/images/comment_bg.png'/>);
	}
	.goods-title{color: #82C11F; font-size: 2rem;background:rgba(75,78,74,.5);display:inline;color:#fff;padding:5 10px;}
	</style>
<body>
<div id="app-top">
		<p>添加</p>
			<input class="name" name="uname" placeholder="用户名">
			<input class="age" name="age" placeholder="年龄">
			<input class="birth" name="birthday" placeholder="生日">
			<input class="sal" name="salary" placeholder="工资">
			<a href="javascript:;" class="btn" @click="add">提交</a>
		<hr>
		<div class="showupdate" style="display:none;">
		<p>编辑</p>
			<input type="hidden" class="eid" name="uname" placeholder="用户名" v-model="emp.id">
			<input class="uname" name="uname" placeholder="用户名" v-model="emp.uname">
			<input class="uage" name="age" placeholder="年龄" v-model="emp.age">
			<input class="ubirth" name="birthday" placeholder="生日" v-model="emp.birthday">
			<input class="usal" name="salary" placeholder="工资" v-model="emp.salary">
			<a href="javascript:;" class="btn" @click="update">提交</a>
		</div>
		<hr>
		<p><a class="delete" href="javascript:void(0);">删除</a></p>
		<p>员工列表</p>
		
		<style>
			table tr{margin:0 20px;}
			.comm a{color:green;}
		</style>
		<ul>
			<li v-for="empr in empList">
				<span>姓名：{{empr.uname}}</span>
				<span>年龄：{{empr.age}}</span>
				<span>生日：{{empr.birthday}}</span>
				<span>工资：{{empr.salary}}</span>
				<span class="comm"><a class="updatee" href="javascript:;" @click="show(empr.id)">编辑</a></span>
				<span class="comm"><a class="deletee" href="javascript:;" @click="deleteEmp(empr.id)">删除</a></span>
				<span class="comm"><a class="showe" href="javascript:;" @click="show(empr.id)">显示</a></span>
			</li>
		</ul>
		<hr>
		<p>显示未删除员工</p>
		<div class="show-nodel" v-for="nodelemp in noempList">
			<span>姓名：{{nodelemp.uname}}</span>
			<span>年龄：{{nodelemp.age}}</span>
			<span>生日：{{nodelemp.birthday}}</span>
			<span>工资：{{nodelemp.salary}}</span>
			<span>工资：{{nodelemp.salary}}</span>
			<span>工资：{{nodelemp.status}}</span>
		</div>
 </div>
	<script type="text/javascript">
	var vm=new Vue({
		el:"#app-top",
		data:{
			empList:[],
			emp:{},
			noempList:[]
		},
		methods:{
			add:function(){
				var name=$.trim($(".name").val());
				var age=$.trim($(".age").val());
				var birth=$.trim($(".birth").val());
				var sal=$.trim($(".sal").val());
				
				var data={
						"uname":name,
						"age":age,
						"birthday":birth,
						"salary":sal
					};
				
				console.log(data);
				
				$.ajax({
					url:"<c:url value='/rest/emp.add'/>",
					methods:"get",
					data:data,
					success:function(r){
						console.log("--->"+r);
						
						$("ul").prepend("<li><span>姓名："+name+"</span>"+
								"				<span>年龄："+age+"</span>"+
								"				<span>生日："+birth+"</span>"+
								"				<span>工资："+sal+"</span>"+
								"				<span class='comm'><a class='updatee' href='javascript:;' @click='update(id)'>编辑</a></span>"+
								"				<span class='comm'><a class='deletee' href='javascript:;' @click='deleteEmp(empr.id)'>删除</a></span>"+
								"				<span class='comm'><a class='showe' href='javascript:;' @click='show(empr.id)'>显示</a></span></li>");
					}
				});
			},
			findAll:function(){
				$.ajax({
					url:"/WX-PLATFORM/rest/emp.all",
					methods:"get",
					success:function(r){
						//console.log("-length-->"+r.length);
						vm.empList=r;
					}
				});
			},
			findAllNoDel:function(){
				$.ajax({
					url:"/WX-PLATFORM/rest/emp.nodel.all",
					methods:"get",
					success:function(r){
						//console.log("-length-->"+r.length);
						vm.noempList=r;
					}
				});
			},
			update:function(){
				var id=$.trim($(".eid").val());
				var name=$.trim($(".uname").val());
				var age=$.trim($(".uage").val());
				var birth=$.trim($(".ubirth").val());
				var sal=$.trim($(".usal").val());
				
				var data={
						"id":id,
						"uname":name,
						"age":age,
						"birthday":birth,
						"salary":sal
					};
				console.log(data);
				$.ajax({
					url:"/WX-PLATFORM/rest/emp.update",
					methods:"get",
					data:data,
					success:function(r){
						//console.log("-length-->"+r.length);
						vm.empList=r;
						location.reload();
					}
				});
			},
			show:function(id){
				$(".showupdate").css({"display":"block"});
				$.ajax({
					url:"/WX-PLATFORM/rest/emp.get?id="+id,
					methods:"get",
					success:function(r){
						//console.log("-length-->"+r.length);
						vm.emp=r;
					}
				});
			},
			deleteEmp:function(id){
				$.ajax({
					url:"/WX-PLATFORM/rest/emp.del/"+id,
					methods:"get",
					success:function(r){
						//console.log("-length-->"+r.length);
						vm.empList=r;
						location.reload();
					}
				});
			}
		}
	});
	
	    //页面加载的时候执行
		$(function(){
			vm.findAll();
			vm.findAllNoDel();
			$(".delete").on("click",function(){
				$.ajax({
					url:"<c:url value='/rest/emp.add'/>",
					methods:"get",
					data:data,
					success:function(r){
						console.log("--->"+r);
					}
				});
			});
		
		});
	</script>
</body>
</html>
